import React from 'react';
import {
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import RatioIcon from '../imageEditor/RatioIcon';

interface LayoutEditorProps {
  onSizeSelect: (size: CanvasSize) => void;
  onGridSelect: (grid: GridLayout) => void;
  currentTab?: 'size' | 'grid';
}

export interface CanvasSize {
  key: string;
  label: string;
  aspectRatio: number;
  width: number;
  height: number;
}

export interface GridLayout {
  key: string;
  label: string;
  type: 'regular' | 'irregular' | 'special';
  rows: number;
  cols: number;
  cells?: GridCell[]; // 用于不规则宫格
  preview?: string; // 预览路径
}

export interface GridCell {
  id: string;
  row: number;
  col: number;
  rowSpan?: number;
  colSpan?: number;
  width: number;
  height: number;
  x: number;
  y: number;
  path?: string; // SVG路径
}

const canvasSizes: CanvasSize[] = [
  { key: '1:1', label: '正方形', aspectRatio: 1, width: 400, height: 400 },
  { key: '2:3', label: '竖版', aspectRatio: 2/3, width: 300, height: 450 },
  { key: '3:2', label: '横版', aspectRatio: 3/2, width: 450, height: 300 },
  { key: '3:4', label: '竖版标准', aspectRatio: 3/4, width: 300, height: 400 },
  { key: '4:3', label: '标准', aspectRatio: 4/3, width: 400, height: 300 },
  { key: '16:9', label: '宽屏', aspectRatio: 16/9, width: 480, height: 270 },
  { key: '9:16', label: '手机壁纸', aspectRatio: 9/16, width: 270, height: 480 },
];

const gridLayouts: GridLayout[] = [
  // 常规宫格
  { key: 'none', label: '无网格', type: 'regular', rows: 1, cols: 1 },
  { key: '2x1', label: '2宫格', type: 'regular', rows: 1, cols: 2 },
  { key: '3x1', label: '3宫格', type: 'regular', rows: 1, cols: 3 },
  { key: '2x2', label: '4宫格', type: 'regular', rows: 2, cols: 2 },
  { key: '3x2', label: '6宫格', type: 'regular', rows: 2, cols: 3 },
  { key: '3x3', label: '9宫格', type: 'regular', rows: 3, cols: 3 },
  { key: '4x2', label: '8宫格', type: 'regular', rows: 2, cols: 4 },
  { key: '4x3', label: '12宫格', type: 'regular', rows: 3, cols: 4 },
  { key: '5x3', label: '15宫格', type: 'regular', rows: 3, cols: 5 },
];

export const LayoutEditor: React.FC<LayoutEditorProps> = ({
  onSizeSelect,
  onGridSelect,
  currentTab = 'size',
}) => {
  const OUTER = 15; // 外层间距
  const GAP = 15; // 每列/每行间距
  const COLUMNS = 7; // 每行 7 个
  const screenWidth = Dimensions.get('window').width;
  const itemWidth = Math.floor(
    (screenWidth - OUTER * 2 - GAP * (COLUMNS - 1)) / COLUMNS
  );
  return (
    <View style={styles.container}>
      {/* 内容区域 */}
      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {currentTab === 'size' ? (
          <View style={styles.sizeGrid}>
            {canvasSizes.map((size, index) => (
              <TouchableOpacity
                key={size.key}
                style={[
                  styles.sizeItem,
                  {
                    width: itemWidth,
                    marginRight: (index + 1) % COLUMNS === 0 ? 0 : GAP,
                    marginBottom: GAP,
                  },
                ]}
                onPress={() => onSizeSelect(size)}
              >
                <View style={styles.sizePreview}>
                  <RatioIcon ratio={size.aspectRatio} size={20} color="#999" />
                </View>
                <Text style={styles.sizeRatio}>{size.key}</Text>
              </TouchableOpacity>
            ))}
          </View>
        ) : (
          <View style={styles.gridContainer}>
            {gridLayouts.map((grid, index) => (
              <TouchableOpacity
                key={grid.key}
                style={[
                  styles.gridItem,
                  {
                    width: itemWidth,
                    marginRight: (index + 1) % COLUMNS === 0 ? 0 : GAP,
                    marginBottom: GAP,
                  },
                ]}
                onPress={() => onGridSelect(grid)}
              >
                <View style={styles.gridPreview}>
                  {Array.from({ length: grid.rows * grid.cols }).map((_, index) => (
                    <View
                      key={index}
                      style={[
                        styles.gridCell,
                        {
                          width: `${100 / grid.cols}%`,
                          height: `${100 / grid.rows}%`,
                        },
                      ]}
                    />
                  ))}
                </View>
              </TouchableOpacity>
            ))}
          </View>
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    maxHeight: 200,
  },
  content: {
    paddingHorizontal: 15,
    paddingVertical: 15,
  },
  sizeGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
  },
  sizeItem: {
    alignItems: 'center',
    width: 48,
    height: 48,
  },
  sizePreview: {
    width: 36,
    height: 36,
    borderRadius: 6,
    backgroundColor: 'transparent',
    marginBottom: 4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  sizeRatioPreview: {
    width: 24,
    borderRadius: 4,
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#999',
    height: undefined,
  },
  sizeRatio: {
    fontSize: 10,
    color: '#666',
    marginTop: 0,
    textAlign: 'center',
    height: 14,
  },
  gridContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
  },
  gridItem: {
    alignItems: 'center',
  },
  gridPreview: {
    width: 36,
    height: 36,
    backgroundColor: 'transparent',
    borderRadius: 6,
    borderWidth: 1,
    borderColor: '#999',
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 4,
    overflow: 'hidden',
  },
  gridCell: {
    borderWidth: 0.5,
    borderColor: '#ccc',
    backgroundColor: 'transparent',
  },
  gridLabel: {
    fontSize: 12,
    color: '#333',
    fontWeight: '500',
    textAlign: 'center',
    height: 16,
  },
});
